import React, { useState, useEffect, useMemo } from 'react';
import {
  Button,
  Card,
  Result,
  Space,
  Table,
  TableColumnProps,
  Typography,
  PaginationProps,
  Modal,
  Tag,
} from '@arco-design/web-react';
import { DetailModal } from './detailModal';
import * as Model from '@/services/model';
import SearchForm from './form';
import { IconPlus } from '@arco-design/web-react/icon';
import styles from './style/index.module.less';
import { useActivate, useAliveController } from 'react-activation';
import Api from '@/services/api';
import * as Constants from './constants';
import { Time } from '@/utils';
import './mock';
const { Title } = Typography;

function Page() {
  const [workPeriodDetail, setWorkPeriodDetail] = useState<
    Model.WorkPeriod.default | false
  >(false);

  const columns: TableColumnProps<Model.WorkPeriod.default>[] = [
    { title: 'ID', dataIndex: 'id' },
    { title: '工厂名称', dataIndex: 'name' },
    {
      title: '工作时间',
      dataIndex: 'timeRanges',
      render: (col, item) => {
        return (
          <Space direction="vertical">
            {Constants.weekDays
              .filter((e) => item.timeRanges.some((t) => t.weekday === e))
              .map((e) => {
                return (
                  <Space key={e}>
                    <span>{e}：</span>
                    {item.timeRanges
                      .filter((t) => t.weekday === e)
                      .map((t) => (
                        <Tag
                          color="blue"
                          key={`${t.start}-${t.end}`}
                        >{`${t.start}-${t.end}`}</Tag>
                      ))}
                  </Space>
                );
              })}
          </Space>
        );
      },
    },

    {
      title: '操作',
      render: (col, item) => {
        return (
          <Space>
            <Button
              size="small"
              type="primary"
              onClick={() => setWorkPeriodDetail(item)}
            >
              编辑
            </Button>
          </Space>
        );
      },
    },
  ];

  const [data, setData] = useState([]);
  const [pagination, setPatination] = useState<PaginationProps>({
    sizeCanChange: true,
    showTotal: true,
    pageSize: 10,
    current: 1,
    pageSizeChangeResetCurrent: true,
  });
  const [loading, setLoading] = useState(true);
  const [formParams, setFormParams] = useState({});

  useActivate(() => {
    console.log('active');
  });
  useEffect(() => {
    fetchData();
  }, [pagination.current, pagination.pageSize, JSON.stringify(formParams)]);

  function fetchData() {
    const { current, pageSize } = pagination;
    setLoading(true);
    Api.getWorkPeriodList({
      page: current,
      pageSize,
      ...formParams,
    })
      .then((res) => {
        console.log(res.list);
        setData(res.list);
        setPatination({
          ...pagination,
          current,
          pageSize,
          total: res.total,
        });
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  }

  function onChangeTable({ current, pageSize }) {
    setPatination({
      ...pagination,
      current,
      pageSize,
    });
  }

  function handleSearch(params) {
    setPatination({ ...pagination, current: 1 });
    setFormParams({ ...params });
  }

  return (
    <Card>
      <SearchForm onSearch={handleSearch} />
      <Table
        rowKey="id"
        loading={loading}
        onChange={onChangeTable}
        pagination={pagination}
        columns={columns}
        data={data}
      />
      <DetailModal
        workPeriod={workPeriodDetail}
        onCancel={() => {
          console.log('cancel');
          setWorkPeriodDetail(false);
        }}
        onOk={(params) => {
          console.log('ok', params);
          setWorkPeriodDetail(false);
        }}
      />
    </Card>
  );
}

export default Page;
